<template>
<div class="order_list_div" style="position: absolute;width: 100%; height:100%;">
	<!--头部-->
	<!-- <header class="aui-bar aui-bar-nav aui-bar-light opacity_title">
	<router-link to="/main/profile">
		<div class="close_page">
			<i></i>
			<i></i>
			<i></i>
		</div>
	</router-link>
		<div class="aui-title">账户注册</div>
	</header> -->
	<m-header title="账户注册" :hasTitle="true" :hasBack="true"></m-header>
	<!-- <div style="height:3.75rem;"></div> -->
	<div class="aui-content top_div">
		<ul class="aui-list aui-form-list aui-margin-b-15">
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">手机号码</div>
					<div class="aui-list-item-input">
						<input type="number" placeholder="请输入手机号码" maxlength="11" v-model="phoneNumber">
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">短信验证码</div>
					<div class="aui-list-item-input">
						<input type="text" placeholder="请输入验证码" v-model="mobileCode">
					</div>
					<div class="verify_code">
						<div class="aui-btn" @click="getVerifyCode" v-text="code"></div>
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">登录密码</div>
					<div class="aui-list-item-input">
						<input type="password" placeholder="请输入至少6位的数字或字母" v-model="passWord">
					</div>
				</div>
			</li>
			<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">确认密码</div>
					<div class="aui-list-item-input">
						<input type="password" placeholder="请再次输入密码" v-model="ensurePassWord">
					</div>
				</div>
			</li>
			<!--<li class="aui-list-item">
				<div class="aui-list-item-inner">
					<div class="aui-list-item-label">邀请码</div>
					<div class="aui-list-item-input">
						<input type="text" placeholder="请输入邀请码">
					</div>
				</div>
			</li>暂时隐藏-->
			<li class="aui-list-item" style="text-align: left;"  v-if="title">
				<div class="protical">
					<p>
						<!-- <input class="aui-checkbox" type="checkbox" name="demo1" checked="" v-model="agree"> -->
						已阅读并同意以下协议: </p>
					<div v-for="(detail,num) in protocol" :key="num">
						<router-link :to="{path:'/main/protical',query:{expCode:detail.expCode}}">
							<a @click="model=true;">《{{detail.title}}》</a>
						</router-link>
						<!--<div @click="getDetail(detail.expCode)"></div>-->
					</div>
				</div>
			</li>
		</ul>
		<div class="aui-content-padded">
			<div class="aui-btn aui-btn-danger aui-btn-block" @click="sendInfo">{{title?'同意协议并':''}}注册</div>
			<router-link to="login">
			<div id="login" class="aui-btn aui-btn-danger aui-btn-block aui-btn-outlined">已有账号，立即登录</div>
			</router-link>
		</div>
	</div>
	<div class="rule_model" @click="model=false;" v-if="model">
		<div class="rule_model_1" v-if="detail">
			<!-- <header v-html="detail.typeName"></header> -->
			<article v-html="detail.detail">
			</article>
		</div>
		<div v-else>
			<article>暂无数据</article>
		</div>
	</div>
</div>
</template>

<script>
import {mobileCode, register, queryExplain, findDetail, company} from '../../api/wxh/getData.js'
import Header from "../../real-containers/header"
import {mapGetters, mapMutations} from 'vuex'
import { Toast } from '../../utils/toast.js'
import {showLoading, hideLoading} from '../../utils/loading.js'
import MD5 from '../../utils/md5_wxh.js'
	export default {
		data () {
			return {
				phoneNumber: null,//电话号码
				mobileCode: null,//验证码
				passWord: null,//密码
				ensurePassWord: null,//再次输入密码
				agree: null,
				code:'获取验证码',
				setInt:null,
				time: 300,
				flag: false,
				model: false,
				model_rewardDesc: false,
				model_span: false,
				detail: '',
				title: '',
				protocol:''

			}
		},
		computed: {
			...mapGetters('wxh',[
				'sessionId'
			]),
		    //判断手机号码
		    rightPhoneNumber: function (){
		        return /^1\d{10}$/gi.test(this.phoneNumber)
		    }
		},
		async created(){
			let res = await queryExplain();
			if(res.status == 200){
				this.title = res.data.data[0];
				this.protocol = res.data.data
			}
			
		}
		,
		methods: {
			...mapMutations('wxh',[
				'RECORD_SESSIONID'
			])
			,
			...mapMutations('zwy',[
				'setvuexPhoneNumber',
				'setvuexPassword'
			])
			,
			async getVerifyCode(){
				if(this.flag) {
					if(this.time >= 0){
						Toast({
						  message: "60秒后可重新获取！",
						  // iconClass:"aui-iconfont aui-icon-close",
						  duration: 2000,
						  type: 'warn'
						});
						return
					}
				}

				if(this.rightPhoneNumber) {

					//获取短信验证码;
					// MD5(this.phoneNumber);
					// console.log(MD5(this.phoneNumber));
          let req = await company('eCode='+api.enterpriseCode+'&pNum='+this.phoneNumber);

					let res = await mobileCode({
            phone :this.phoneNumber,
            security: MD5(req.msg)
          });

					//判断用户是否存在；
					if(res.returnCode == 0) {
						//弹框提示电话号码已存在；
						Toast({
						  message: res.msg,
						  // iconClass:"aui-iconfont aui-icon-close",
						  duration: 2000,
						  type: 'fail'
						});
						return
					}else if(res.returnCode == 1) {
						//提示输入的手机号尚未绑定；
						//验证码已发送；
						Toast({
						  message: '验证码已发送',
						  // iconClass:"aui-iconfont aui-icon-correct",
						  duration: 2000,
						  type: 'success'
						});

						this.setInt = setInterval(() => {
							if(this.time >= 0) {
								this.code = "重新获取验证码"+"("+this.time+")";
								this.time --;
							}
							if(this.time < 0 ) {
								this.code = "重新获取验证码";
								this.time = 300;
								this.flag = false;
								clearInterval(this.setInt);
							}
						}, 1000)

						this.flag = true;
					}
					this.RECORD_SESSIONID(res.data[0])
				} else {
					Toast({
					  message: '手机号码输入不正确',
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});
					return
				}
			},
			// stopsetInt() {
			// 	window.clearInterval(this.setInt);
			// 	this.code = "获取验证码";
			// }
			// ,
			async sendInfo() {
				if(!this.rightPhoneNumber) {
					//手机号码输入不正确；
					Toast({
					  message: '手机号码输入不正确',
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});
					return
				} else if(!(/^\d{6}$/gi.test(this.mobileCode))) {
					//验证码不正确
					Toast({
					  message: '验证码不正确',
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});

					return
				} else if(!(/^[\S]{6,}$/.test(this.passWord))) {
					//提示密码不符合格式
					Toast({
					  message: '密码格式不正确,密码至少6位字母和数字',
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});
					return
				} else if(!(this.passWord === this.ensurePassWord)) {
					//提示两次密码不一致；
					Toast({
					  message: '密码不一致',
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});
					return
				}else if(!this.flag){
					//提示验证码
					Toast({
					  message: '验证码无效',
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});
					return
				}
				// else if(!this.agree) {

				// 	Toast({
				// 	  message: '需要同意服务协议',
				// 	  duration: 2000,
				// 	  type: 'fail'
				// 	});
				// 	return
				// }

				let res = await register(this.phoneNumber, this.mobileCode, MD5(this.passWord), window.api.enterpriseCode);
				showLoading();
				if(res.returnCode === 0) {
					//注册失败；
					hideLoading();
					Toast({
					  message: res.msg,
					  // iconClass:"aui-iconfont aui-icon-close",
					  duration: 2000,
					  type: 'fail'
					});
				} else
				if(res.returnCode === 1) {
					hideLoading();
					Toast({
					  message: "注册成功",
					  // iconClass:"aui-iconfont aui-icon-correct",
					  duration: 2000,
					  type: 'success'
					});
					//注册成功返回上一页；
					// this.$router.go(-1);

					//注册成功保留数据
					this.setvuexPhoneNumber(this.phoneNumber);
					this.setvuexPassword(this.passWord);

					this.$router.push({path:'login'});
					return
				} else {
						Toast({
						  message: "网络错误",
						  duration: 2000,
						  type: 'fail'
						});
						hideLoading();
					}
			},
			//async getDetail(expCode){
			//	if(this.detail){
			//		return
			//	}
			//	showLoading();
			//	let req = await findDetail(expCode);
			//	if(req.status == 200) {
			//		hideLoading();
			//		this.detail = req.data.data[0];
			//	} else {
			//		hideLoading();
			//	}
			//}
		},
		watch: {
			userInfo: function(value) {
				this.getVerifyCode();
			}
		},
		components: {
		        "m-header": Header,
		},

	}
</script>
<style scoped>
	.rule_model {
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.6);
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
		color: #000;
		justify-content: center;
		padding:1rem 0;
	}
	.rule_model_1 {
		width: 80%;
		max-height:100%;
		margin: auto;
		background: rgba(255, 255, 255, 1);

    border-radius: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    white-space: wrap;
    word-break: break-all;
    min-height: 25%;
    text-align: left;
    padding: 1rem;
    line-height: 1.5rem;
	}
	header {
		text-align: center;
	}
	article {
		text-indent: 2rem;
	}
	.protical {
		padding-bottom:1rem;
	}
	.protical p {
		color:#333;
		margin-bottom:0.5rem;
	}
	.protical_detail {
		padding:0.2rem;
	}
	.rule_model_1 {
		overflow:scroll;
	}
</style>
